<template>
  <div class="home">
    <keep-alive>
      <div class="left">
        <el-row>
          <el-col style="width: 100%">
            <h5 class="mb-2">智慧社区管理系统</h5>
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-menu-item index="0">
                <el-icon></el-icon>
                <router-link class="active-link" to="/preview">
                  首页预览
                </router-link>
              </el-menu-item>
              <el-sub-menu index="1">
                <template #title>
                  <!-- <el-icon><location /></el-icon> -->
                  <el-icon><document /></el-icon>
                  <span>合同管理</span>
                </template>
                <el-menu-item index="1-1">
                  <router-link class="active-link" to="/contractlist">
                    合同列表
                  </router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <router-link class="active-link" to="/contracttype">
                    合同分类
                  </router-link>
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="2">
                <template #title>
                  <el-icon><location /></el-icon>
                  <!-- <el-icon><document /></el-icon> -->
                  <span>疫情防控</span>
                </template>
                <el-menu-item index="2-1">
                  <router-link class="active-link" to="/epidemicrecord">
                    防控信息
                  </router-link>
                </el-menu-item>
                <el-menu-item index="2-2">
                  <router-link class="active-link" to="/addepidemic">
                    添加防控
                  </router-link>
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title>
                  <el-icon><location /></el-icon>
                  <!-- <el-icon><document /></el-icon> -->
                  <span>车辆管理</span>
                </template>
                <el-menu-item index="3-1">
                  <router-link class="active-link" to="/carrecord">
                    全部车辆
                  </router-link>
                </el-menu-item>
                <el-menu-item index="3-2">
                  <router-link class="active-link" to="/addcar">
                    录入车辆
                  </router-link>
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="4">
                <template #title>
                  <!-- <el-icon><location /></el-icon> -->
                  <el-icon><document /></el-icon>
                  <span>业主档案</span>
                </template>
                <el-menu-item index="4-1">
                  <router-link class="active-link" to="/ownerslist">
                    业主列表
                  </router-link>
                </el-menu-item>
                <el-menu-item index="4-2">
                  <router-link class="active-link" to="/addowners">
                    添加业主
                  </router-link>
                </el-menu-item>
                <el-menu-item index="4-3">
                  <router-link class="active-link" to="/ownersxiang">
                    业主信息
                  </router-link>
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="5">
                <template #title>
                  <!-- <el-icon><location /></el-icon> -->
                  <el-icon><document /></el-icon>
                  <span>房产管理</span>
                </template>
                <el-menu-item index="5-1">
                  <router-link class="active-link" to="/houselist">
                    房产列表
                  </router-link>
                </el-menu-item>
                <el-menu-item index="5-2">
                  <router-link class="active-link" to="/addhouse">
                    添加房产
                  </router-link>
                </el-menu-item>
                <el-menu-item index="5-2">
                  <router-link class="active-link" to="/housexiang">
                    房产详情
                  </router-link>
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="6">
                <template #title>
                  <!-- <el-icon><location /></el-icon> -->
                  <el-icon><document /></el-icon>
                  <span>车位管理</span>
                </template>
                <el-menu-item index="6-1">
                  <router-link class="active-link" to="/cheweilist">
                    车位列表
                  </router-link>
                </el-menu-item>
                <el-menu-item index="6-2">
                  <router-link class="active-link" to="/addchewei">
                    添加车位
                  </router-link>
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="7">
                <template #title>
                  <!-- <el-icon><location /></el-icon> -->
                  <el-icon><document /></el-icon>
                  <span>维修维护</span>
                </template>
                <el-menu-item index="7-1">
                  <router-link class="active-link" to="/weixiulist">
                    维修列表
                  </router-link>
                </el-menu-item>
                <el-menu-item index="7-2">
                  <router-link class="active-link" to="/addweixiu">
                    添加维修
                  </router-link>
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="8">
                <template #title>
                  <!-- <el-icon><location /></el-icon> -->
                  <el-icon><document /></el-icon>
                  <span>装修管理</span>
                </template>
                <el-menu-item index="8-1">
                  <router-link class="active-link" to="/zhuangxiulist">
                    装修列表
                  </router-link>
                </el-menu-item>
                <el-menu-item index="8-2">
                  <router-link class="active-link" to="/addzhuangxiu">
                    添加装修
                  </router-link>
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="9">
                <template #title>
                  <!-- <el-icon><location /></el-icon> -->
                  <el-icon><document /></el-icon>
                  <span>访客管理</span>
                </template>
                <el-menu-item index="9-1">
                  <router-link class="active-link" to="/fangkelist">
                    全部访客
                  </router-link>
                </el-menu-item>
                <el-menu-item index="9-2">
                  <router-link class="active-link" to="/addfangke">
                    添加访客
                  </router-link>
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="10">
                <template #title>
                  <!-- <el-icon><location /></el-icon> -->
                  <el-icon><document /></el-icon>
                  <span>能耗管理</span>
                </template>
                <el-menu-item index="10-1">
                  <router-link class="active-link" to="/nenghaolist">
                    能耗列表
                  </router-link>
                </el-menu-item>
                <el-menu-item index="10-2">
                  <router-link class="active-link" to="/addnenghao">
                    添加能耗
                  </router-link>
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="11">
                <template #title>
                  <!-- <el-icon><location /></el-icon> -->
                  <el-icon><document /></el-icon>
                  <span>监控管理</span>
                </template>
                <el-menu-item index="11-1">
                  <router-link class="active-link" to="/jiankonglist">
                    监控列表
                  </router-link>
                </el-menu-item>
                <el-menu-item index="11-2">
                  <router-link class="active-link" to="/addjiankong">
                    添加监控
                  </router-link>
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="12">
                <template #title>
                  <el-icon><location /></el-icon>
                  <!-- <el-icon><document /></el-icon> -->
                  <span>权限管理</span>
                </template>
                <el-menu-item index="12-1">
                  <router-link class="active-link" to="/user">
                    用户管理
                  </router-link>
                </el-menu-item>
                <!-- <el-menu-item index="4-2">
                  <router-link class="active-link" to="/addcar">
                    录入车辆
                  </router-link>
                </el-menu-item> -->
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </keep-alive>
    <div class="right">
      <!-- <div class="title">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item
            v-for="(item, index) in items"
            :key="index"
            :to="item.to"
            >{{ item.text }}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div> -->
      <div class="title">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item
            v-for="(item, index) in items"
            :key="index"
            :to="item.to"
            >{{ item.text }}</el-breadcrumb-item
          >
        </el-breadcrumb>
        <div class="user-info">
          <img class="avatar" :src="userInfo.avatar" alt="用户头像" />
          <span class="username">{{ userInfo.username }}</span>
        </div>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
//左侧菜单
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

import { ref, reactive, onMounted, watch } from "vue";
import { useRoute } from "vue-router";

const items = ref([]);
const route = useRoute();

const name = ref("Header");
const userInfo = reactive({
  username: "小鲨",
  avatar: "../../../public/13337674308757190.jpeg",
});

const updateBreadcrumb = () => {
  if (route.meta && route.meta.breadcrumb) {
    items.value = route.meta.breadcrumb;
  } else {
    items.value = [];
  }
};

onMounted(updateBreadcrumb);
watch(() => route.meta.breadcrumb, updateBreadcrumb);

//结束
</script>

<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  display: flex;

  .left {
    width: 180px;
    height: auto;
    background: #fff;
    overflow: auto;
    .mb-2 {
      text-align: center;
      font-size: 15px;
      font-weight: 500;
      height: 60px;
      padding: 0;
      margin: 0;
      line-height: 60px;
    }
    .router-link-active {
      /* 样式重置 */
      /* 如：text-decoration: none; color: inherit; */
      text-decoration: none;
      color: inherit;
    }
    .active-link {
      /* 样式重置 */
      /* 如：text-decoration: none; color: inherit; */
      text-decoration: none;
      color: inherit;
    }
  }

  /* 隐藏滚动条 */
  .left::-webkit-scrollbar {
    width: 0.1px;
    background-color: transparent;
  }

  .left::-webkit-scrollbar-thumb {
    background-color: transparent;
  }

  .right {
    width: calc(100% - 180px);
    height: auto;
    // background-color: red;
    .title {
      width: 100%;
      height: 60px;
      // background-color: yellow;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30px;
      box-sizing: border-box;
      background-color: #f5f5f5;
      // .header {
      //   /*原有样式*/
      //   background-color: #f5f5f5;
      //   padding: 10px;
      //   display: flex;
      //   justify-content: right;
      // }
      .user-info {
        display: flex;
        align-items: center;
      }
      .avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .username {
        font-size: 16px;
        font-weight: bold;
      }
    }
    .content {
      width: 100%;
      height: calc(100vh - 60px);
      // background-color: green;
      padding: 20px;
      box-sizing: border-box;
      overflow: auto;
    }
  }
}
// 对el-breadcrumb进行样式调整
.el-breadcrumb {
  padding: 0 20px;
  font-size: 14px;
}
.el-breadcrumb__item:last-child {
  font-weight: bold;
}
</style>
